<template>
  <div>
    <h2>财务报表</h2>

    <el-row>
      <el-col :span="6">
        <div class="count">
          <div class="p-left">
            <i class="el-icon-wallet icon"></i>
          </div>
          <div class="tot">
            <span>收入</span>
            <el-button type="text">{{ finStatement[0]}}</el-button>
          </div>

        </div>
      </el-col>
      <el-col :span="6">
        <div class="count">
          <div class="f-left">
            <i class="el-icon-s-finance icon"></i>
          </div>
          <div class="tot">
            <span>支出</span>
            <el-button type="text">{{ finStatement[1] }}</el-button>
          </div>

        </div>
      </el-col>
      <el-col :span="6">
        <div class="count">
          <div class="s-left">
            <i class="el-icon-coin icon"></i>
          </div>
          <div class="tot">
            <span>盈利</span>
            <el-button type="text">{{ finStatement[2] }}</el-button>
          </div>

        </div>
      </el-col>
      <el-col :span="6">
        <div class="count">
          <div class="pr-left">
            <i class="el-icon-time icon"></i>
          </div>
          <div class="tot">
            <span>待定</span>
            <el-button type="text">{{ finStatement[3]}}</el-button>
          </div>

        </div>
      </el-col>
    </el-row>


    <el-row>
      <el-col :span="24">
        <div class="followBox">
          <div class="fl-header">
            <span>本年度盈利报告</span>
            <el-button icon="el-icon-close" class="icon-btn"></el-button>
          </div>
          <div class="tabCont">
            <EchartLine :dataSource="lineData"></EchartLine>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div class="annulTab">
          <div>
            <div class="annul-header">
              <span>详细收入支出报告</span>
              <el-button icon="el-icon-close" class="icon-btn"></el-button>
            </div>

            <div>
              <el-table :data="tableData" height="250" border style="width: 100%">
                <el-table-column prop="date" label="日期" width="180">

                </el-table-column>
                <el-table-column prop="1" label="1月">
                </el-table-column>
                <el-table-column prop="2" label="2月">
                </el-table-column>
                <el-table-column prop="2" label="3月">
                </el-table-column>
                <el-table-column prop="2" label="4月">
                </el-table-column>
                <el-table-column prop="2" label="5月">
                </el-table-column>
                <el-table-column prop="2" label="6月">
                </el-table-column>
                <el-table-column prop="2" label="7月">
                </el-table-column>
                <el-table-column prop="2" label="8月">
                </el-table-column>
                <el-table-column prop="2" label="9月">
                </el-table-column>
                <el-table-column prop="2" label="10月">
                </el-table-column>
                <el-table-column prop="2" label="11月">
                </el-table-column>
                <el-table-column prop="2" label="12月">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>


  </div>
</template>
<script>

import EchartLine from '@/components/Line'

export default {
  name: '',
  components: {
    EchartLine
  },
  mixins: [],
  props: {

  },
  data() {
    return {
      finStatement: [],
      tableData: [],
      lineData: {
        xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        yAxis: [
          {
            name: '盈利',
            color: '#FF6F00',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
          }
        ]
      }
    }
  },
  created(){
    
  },
  methods: {

  },
  computed: {

  },
  watch: {

  },
  created() {
    this.getStatement()
    this.getYearlyEarnings()
  },
  methods: {
    //报表
    getStatement() {
      this.$axios({
        method: 'get',
        url: '/FinancialManagement/Report/financialStatement',
      }).then(resp => {
        console.log(resp.data.data);
        let arr=resp.data.data;
        let arr1=[0,0,0,0]
        for (let i = 0; i < arr.length; i++) {
          arr1[i] = arr[i].total
        }
        console.log(arr1);
        this.finStatement=arr1
      })
    },
    //年度盈利报告
    getYearlyEarnings() {
      this.$axios({
        method: 'get',
        url: '/FinancialManagement/Report/yearlyEarnings',
      }).then(resp => {
        let arr1 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        let arr = resp.data.data;
        console.log(arr);
        for (let i = 0; i < arr.length; i++) {
          arr1[i] = arr[i].total
        }
        console.log(arr1);
        this.lineData.yAxis[0].data = arr1;
      })
    },
  }
};
</script>
<style scoped>
h2 {
  margin: 10px;
}

.count {
  height: 100px;
  background-color: white;
  margin: 10px;
  position: relative;
}

.p-left {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #dd4b39;
}

.f-left {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #f39c12;
}

.s-left {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #00c0ef;
}

.pr-left {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #00a65a;
}

.tot {
  position: absolute;
  top: 10px;
  left: 110px;
  display: flex;
  flex-direction: column;
}

.icon {
  font-size: 50px;
  color: white;
  position: absolute;
  left: 25px;
  top: 25px;
}

.followBox {
  height: 300px;
  margin: 10px;
  border-top: 3px solid #ccc;
  background-color: rgb(255, 255, 255);
}

.fl-header {
  height: 40px;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-btn {
  border: none;
}

.annulTab {

  margin-left: 10px;
  margin-right: 10px;
  box-sizing: content-box;
}

.annul-header {

  height: 40px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: rgb(255, 255, 255);
  border-top: 3px solid #ccc;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>